<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖动框效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #move{
            width: 100px;
            height:100px;
            background-color: red;
            cursor: move;
            position: absolute;
            /* 设置内容不可选中样式 */
            /* user-select: none; */
        }
    </style>
</head>
<body>
    <div id="move">HelloWorld</div>
    <script src="../js/bing.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let canMove = false  //是否可以拖动
        //x,y用于表示点击在#move上的位置
        let x=0  
        let y=0
        //给#move注册鼠标按下事件
        $('#move').mousedown(function(e){
            canMove = true  //表示可以拖动
            x = e.pageX-$(this).position().left
            y = e.pageY-$(this).position().top
        })

        //算出可移动的最大left
        let maxLeft = $(window).innerWidth()-$('#move').innerWidth()
        //算出可移动的最大top
        let maxTop = $(window).innerHeight()-$('#move').innerHeight()

        //给窗体注册鼠标移动事件
        $(window).mousemove(function(e){
            e.preventDefault()   //取消默认行为
            //判断是否可以拖动
            if(canMove){
                let {pageX,pageY} = e
                let left = pageX-x  //算出移动过后的left
                let top = pageY-y   //算出移动过后的top
                let r = $b.filterLeftAndTop(left,top,maxLeft,maxTop)
                $('#move').css({
                    left:r.left+'px',
                    top:r.top+'px'
                })
            }
        }).mouseup(function(){
            //鼠标在窗口中弹起，设置不能拖动
            canMove = false   
        }).blur(function(){
            //窗口失去焦点，设置不能拖动
            canMove = false   
        })


        //过滤元素left和top的方法
        // function filterLeftAndTop(left,top,maxLeft,MaxTop,minLeft=0,minTop=0){
        //     if(left<minLeft) left = minLeft
        //     if(left>maxLeft) left = maxLeft
        //     if(top<minTop) top = minTop
        //     if(top>maxTop) top = maxTop
        //     return{
        //         left,top
        //     }
        // }
    </script>
</body>
</html>